<template>
  <div class="form-container" >
    <el-tabs type="border-card">
      <div>
        <p class="content-tit">
          印刷费用台账管理
        </p>
        <el-form :label-position="labelPosition" label-width="100px" :model="formData2">
          <el-row type="flex" class="row-bg">
            <el-col :span="8">
              <el-form-item label="订单号" size="mini">
                <el-input v-model="formData2.orderCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单机构" size="mini">
                <el-select v-model="formData2.orderManage" filterable placeholder="请选择机构编码">
                  <el-option
                    v-for="item in tempList"
                    :key="item.code"
                    :label="item.codeName"
                    :value="item.code">
                    <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单部门" size="mini">
                <el-input v-model="formData2.orderTemp"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" class="row-bg">
            <el-col :span="8">
              <el-form-item label="供应商" size="mini">
                <el-select v-model="formData2.orderShop" filterable placeholder="请选择供应商">
                  <el-option
                    v-for="item in shopList"
                    :key="item.code"
                    :label="item.codeName"
                    :value="item.code">
                    <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请时间" size="mini">
                <el-date-picker v-model="formData2.applyDate" type="date" placeholder="请输入申请时间" :format="'yyyy-MM-dd'"
                                :value-format="'yyyy-MM-dd'">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核时间" size="mini">
                <el-date-picker v-model="formData2.checkedDate" type="date" placeholder="请输入审核时间" :format="'yyyy-MM-dd'"
                                :value-format="'yyyy-MM-dd'">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div align="right">
          <el-button type="primary" @click="query" icon="el-icon-search">查询</el-button>
        </div>
      </div>
      <div>
        <p class="content-tit">
          <span @click="isShow('isShowSingles')" v-if='isShowSingles'>-</span>
          <span @click="isShow('isShowSingles')" v-else>+</span>订单列表
        </p>
        <el-table :data="orderList" ref="userTable" @selection-change="handleSelectionChange" style="width: 100%"
                  class='table-common' :highlight-current-row="true" border
                  v-show="isShowSingles">
          <el-table-column label="#" checked="selectionData"
                           type="selection"
                           min-width="6%">
          </el-table-column>
          <el-table-column label="序号" type='index' min-width="8%" align="center"></el-table-column>
          <el-table-column prop="orderCode" label="订单号" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="orderName" label="订单人" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="applyDate" label="申请时间" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="checkedDate" label="审核时间" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="orderManage" label="订单机构" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="orderTemp" label="订单部门" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="certifyNo" label="单证数量" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="orderShop" label="供应商" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="orderFee" label="订单总金额" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="orderTip" label="折扣" min-width="6%" align="center"></el-table-column>
          <el-table-column prop="state" label="结算完毕" min-width="6%" align="center"></el-table-column>
          <el-table-column prop="payList" label="结算方式" min-width="6%" align="center"></el-table-column>
          <el-table-column prop="payFee" label="已结金额" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="shopId" label="供应商账号" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="shopName" label="开户人" min-width="8%" align="center"></el-table-column>
          <el-table-column label="操作" min-width="10%" align="center">
            <template slot-scope="scope">
              <el-button type="primary"
                         icon="el-icon-view"
                         @click="dialogTableVisible1 = true"
                         size="mini">详情
              </el-button>
              <el-dialog title="征订单证列表" :visible.sync="dialogTableVisible1" width="86%" :append-to-body="true">
                <el-table :data="applyList" ref="userTable" @selection-change="handleSelectionChange" style="width: 100%"
                          class='table-common' :highlight-current-row="true" border
                          v-show="isShowSingles">
                  <el-table-column label="序号" type='index' min-width="8%" align="center"></el-table-column>
                  <el-table-column prop="orderCode" label="批次号" min-width="10%" align="center"></el-table-column>
                  <el-table-column prop="tempCode" label="机构编码" min-width="10%" align="center"></el-table-column>
                  <el-table-column prop="tempName" label="机构名称" min-width="10%" align="center"></el-table-column>
                  <el-table-column prop="applyDate" label="申请时间" min-width="10%" align="center"></el-table-column>
                  <el-table-column prop="applyCount" label="申请数量" min-width="8%" align="center"></el-table-column>
                  <el-table-column prop="certifyPrice" label="印刷单价" min-width="8%" align="center"></el-table-column>
                  <el-table-column prop="agio" label="折扣" min-width="8%" align="center"></el-table-column>
                  <el-table-column prop="printCount" label="印刷费用" min-width="10%" align="center"></el-table-column>
                  <el-table-column label="操作" min-width="10%" align="center">
                    <template slot-scope="scope">
                      <el-button type="primary"
                                 icon="el-icon-view"
                                 @click="dialogTableVisible = true"
                                 size="mini">详情
                      </el-button>
                      <el-dialog title="征订单证列表" :visible.sync="dialogTableVisible" width="86%" :append-to-body="true">
                        <el-table :data="certifysList" ref="certifysList" @selection-change="handleSelectionChange"
                                  class='table-common' :highlight-current-row="true" border>

                          <el-table-column label="序号" type='index' min-width="8%" align="center"></el-table-column>
                          <el-table-column prop="certifyCode" label="单证编码" min-width="8%" align="center"></el-table-column>
                          <el-table-column prop="certifyName" label="单证名称" min-width="10%" align="center"></el-table-column>
                          <el-table-column prop="certifyType" label="单证类型" min-width="10%" align="center"></el-table-column>
                          <el-table-column prop="certifyOperType" label="单证业务类型" min-width="8%" align="center"></el-table-column>
                          <el-table-column prop="certifyStock" label="库存数量" min-width="6%" align="center"></el-table-column>
                          <el-table-column prop="certifyPrice" label="单证单价" min-width="6%" align="center"></el-table-column>
                          <el-table-column prop="applyNo" label="申请数量" min-width="6%" align="center"></el-table-column>
                          <el-table-column prop="updateCertifyApplyNum" label="上级调整数量" min-width="8%" align="center"></el-table-column>
                          <el-table-column prop="applyDate" label="申请时间" min-width="8%" align="center"></el-table-column>
                          <el-table-column prop="applyTempCode" label="申请部门" min-width="8%" align="center"></el-table-column>

                        </el-table>
                        <div class="mar15 " align="right">
                          <el-pagination
                            @current-change="handleCurrentChange"
                            :current-page="publicPage.currentPage"
                            :page-size="publicPage.perPage"
                            layout="total, prev, pager, next, jumper"
                            :total="publicPage.totalSize">
                          </el-pagination>
                        </div>

                      </el-dialog>

                      <el-dialog title="修改征订信息" :visible.sync="dialogFormVisible1" width="80%" :append-to-body="true">
                        <el-form :label-position="labelPosition" label-width="100px" :model="formData1">
                          <el-row type="flex" class="row-bg">
                            <el-col :span="8">
                              <el-form-item label="征订申请人" size="mini">
                                <el-input v-model="formData1.certifyApplyName"></el-input>
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item label="征订机构" size="mini">
                                <el-select v-model="formData1.tempCode" filterable placeholder="请选择征订机构编码">
                                  <el-option
                                    v-for="item in tempList"
                                    :key="item.code"
                                    :label="item.codeName"
                                    :value="item.code">
                                    <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                                  </el-option>
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item label="申请时间" size="mini">
                                <el-date-picker v-model="formData1.applyDate" type="date" placeholder="请输入申请时间" :format="'yyyy-MM-dd'"
                                                :value-format="'yyyy-MM-dd'">
                                </el-date-picker>
                              </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row type="flex" class="row-bg">
                            <el-col :span="8">
                              <el-form-item label="接收人" size="mini">
                                <el-select v-model="formData1.receiver" filterable placeholder="请选择">
                                  <el-option
                                    v-for="item in receiveList"
                                    :key="item.code"
                                    :label="item.codeName"
                                    :value="item.code">
                                    <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                                  </el-option>
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item label="接收人电话" size="mini">
                                <el-input v-model="formData1.phone"></el-input>
                              </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row type="flex" class="row-bg">
                            <el-col :span="16">
                              <el-form-item label="征订备注" size="mini">
                                <el-input type="textarea"  autosize v-model="formData1.applyDis" max-length="50"></el-input>
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </el-form>
                        <div align="right">
                          <el-button type="primary" @click="dialogFormVisible1=false,updatecertifyApply">确定</el-button>
                        </div>
                      </el-dialog>

                    </template>
                  </el-table-column>
                </el-table>
                <div class="mar15 " align="right" v-show="isShowSingles">
                  <el-pagination
                    @current-change="handleCurrentChangeSingle"
                    :current-page="selfPage.currentPage"
                    :page-size="selfPage.perPage"
                    layout="total, prev, pager, next, jumper"
                    :total="selfPage.totalSize">
                  </el-pagination>
                </div>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
        <div class="mar15 " align="right">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="publicPage.currentPage"
            :page-size="publicPage.perPage"
            layout="total, prev, pager, next, jumper"
            :total="publicPage.totalSize">
          </el-pagination>
        </div>
      </div>
    </el-tabs>
  </div>
</template>

<script>
    export default {
        name: "print-cost-manage",
        data(){
          return {
            labelPositionL: 'right',
            formData2: {
              orderManage: '',
              orderTemp: '',
              orderCode: '',
              orderShop: '',
              applyDate: '',
              checkedDate: '',
            },
          isShowSingles: true,
            labelPosition: 'right',
            dialogTableVisible: false,
            dialogTableVisible1: false,
            dialogFormVisible: false,
            dialogFormVisible1: false,
            certifyTypeList: [{code: '1', codeName: '有价单证'}],
            certifyOperTypeList: [{code: '1', codeName: '契约'}, {code: '2', codeName: '保全'}, {code: '3', codeName: '理赔'}],
            isChecked: [{code: '1', codeName: '是'}, {code: '2', codeName: '否'}],
            checkedTypeList: [{code: '1',codeName: '子公司 => 分公司 => 总公司'},{code: '2',codeName: '分公司 => 总公司'},{code: '3',codeName: '子公司 => 总公司'}],
            tempList: [
            {code: '86', codeName: '总部'}, {code: '8601', codeName: '分公司'},
            {code: '860100', codeName: '支公司'},
            {code: '86010000', codeName: '营业部'},
            ],
            shopList: [],
            receiveList: [],
            formData: {
              certifyCode: '010202',
              certifyName: '财务补充文件',
              certifyType: '有价单证',
              certifyOperType: '契约',
              certifyStock: '0',
              certifyPrice: '0.2',
              applyDate: '2020-05-23',
              applyNo: '330',
              updateCertifyApplyNum: '300',
              agio: '1',
              count: '60'
          },
          formData1: {
            certifyApplyId: 'AW20200530',
              certifyApplyName: '张三',
              tempCode: '860100',
              applyDate: '2020-05-30',
              applyCount: '',
              receiver: '李四',
              phone: '',
              applyDis: ''
          },
          selfPage: {
            currentPage: 1,
              hasMore: true,
              perPage: 10,
              totalPage: 0,
              totalSize: 0
          },
          publicPage: {
            currentPage: 1,
              hasMore: true,
              perPage: 10,
              totalPage: 0,
              totalSize: 0
          },
          applyList: [
            {orderCode: 'AW20200530', tempName: '北京分公司',applyCount: '450',tempCode: '860100',certifyPrice: '0.2',agio: '1.0', applyDate: '2020-05-30', printCount: '90'},
            {orderCode: 'AW20200530', tempName: '上海分公司',applyCount: '150',tempCode: '860100',certifyPrice: '0.2',agio: '1.0', applyDate: '2020-05-30', printCount: '30'}

          ],
            certifysList: [
            {certifyCode: '010201',certifyName: '财务补充文件',certifyType: '有价单证',certifyOperType: '契约',certifyStock: '0',certifyPrice: '0.2',applyNo: '200',updateCertifyApplyNum: '150',applyDate: '2020-05-23',applyTempCode: '支公司1'},
            {certifyCode: '010202',certifyName: '财务补充文件',certifyType: '有价单证',certifyOperType: '契约',certifyStock: '0',certifyPrice: '0.2',applyNo: '330',updateCertifyApplyNum: '300',applyDate: '2020-05-27',applyTempCode: '支公司1'},
          ],
            orderList: [
              {orderCode: 'LP2424342',orderName: '赵六',applyDate: '2020-05-31',checkedDate: '2020-06-01',orderManage: '总公司',orderTemp: '财务部',certifyNo: '600',orderShop: '东晟印刷厂',orderFee: '120',orderTip: '',state: '已结',payList: '现金',payFee: '120',shopId: '',shopName: '赵六'}
            ]
        }

        },
      methods: {

        isShow(val) {
          this[val] = !this[val]
        },
        handleSelectionChange(val) {
          this.selectionData = val;
        },
        handleCurrentChangeSingle(num) {
          this.selfFormData.pageNum = num
        },
        handleCurrentChange(num) {
          this.formData.pageNum = num
        },
        query(){},

      }
    }
</script>

<style scoped>

</style>
